<template lang="">
  <div class="content">
    <div class="main">
      <div class="search" style="border: 0px solid #000;height: 60px;padding-top: 20px;background-color: #fff;">
        <div class="left" style="float: left;">
          <!-- <el-select v-model="dictData.dictVar" placeholder="请选择" @input="staffStatusInput()" clearable>
            <el-option v-for="(item,index) in dictList" :key="item.index" :label="item.dictVar" :value="item.dictVar">
            </el-option>
          </el-select> -->
          <el-input suffix-icon="el-icon-search" v-model="dictData.dictVar" placeholder="请输入字典编码"
            @input="staffStatusInput()"
            style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;margin-left: 20px;">
          </el-input>
        </div>
        <div class="right" style="float: right;">
          <el-button @click="dialogFormVisible = true" type="danger" class="button">创建</el-button>
        </div>
        <div class="add">
          <el-dialog :visible.sync="dialogFormVisible">
            <el-form v-model="dictData">
              <el-form-item label="字典编码">
                <el-input v-model="dictData.dictVar" autocomplete="off"
                  style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
              </el-form-item>
              <el-form-item label="字典key">
                <el-input v-model="dictData.dictKey" autocomplete="off"
                  style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
              </el-form-item>
              <el-form-item label="字典值">
                <el-input v-model="dictData.dictValue" autocomplete="off"
                  style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false" type="danger" class="button">取 消</el-button>
              <el-button type="danger" class="button" @click="addDict">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
      <div class="tabs">
        <el-table border ref="singleTable" highlight-current-row :data="dictList" tooltip-effect="dark"
          style="width: 100%;cursor: pointer;" @row-click="rowClick">
          <el-table-column type="index" width="55" label="序号">
          </el-table-column>
          <el-table-column prop="dictVar" label="字典编码" width="150">
          </el-table-column>
          <el-table-column prop="dictKey" label="字典key" width="150">
          </el-table-column>
          <el-table-column prop="dictValue" label="字典值" width="150">
          </el-table-column>
          <el-table-column label="操作"width="250">
            <template slot-scope="scope">
              <el-button @click="updateButton(scope.row)" class="cz-button" type="danger"><span style="position: relative;top: -6px;">修改</span></el-button>
              <el-button @click="deleteRow(scope.$index, scope.row)" class="cz-button"  type="danger"><span style="position: relative;top: -6px;">删除</span></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin:20px;text-align: right;" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :page-size="size" :page-sizes="[10, 20, 30]" :current-page="current"
          :total="total" layout="sizes,prev, pager, next">
        </el-pagination>
      </div>
      <div class="add">
        <el-dialog title="字典修改" :visible.sync="dialogFormVisible1">
          <el-form>
            <el-form-item label="字典编码">
              <el-input v-model="updateRow.dictVar" placeholder="请输入内容"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="字典key" placeholder="请输入内容">
              <el-input v-model="updateRow.dictKey"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
            <el-form-item label="字典值" placeholder="请输入内容">
              <el-input v-model="updateRow.dictValue"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: 20px; cursor: pointer; ">
            <el-button @click="dialogFormVisible1 = false" type="danger" class="button">取 消</el-button>
            <el-button @click="updateDict()" type="danger" class="button">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'system',
    inject: ['reload'],
    data() {
      return {
        dialogFormVisible: false,
        dialogFormVisible1: false,
        dictList: [], //客户列表
        current: 1,
        size: 20,
        currentRow: null,
        total: 0,
        updateRow: {},
        dictData: {
          dictVar: '',
          dictKey: '',
          dictValue: '',
        }
      }
    },
    mounted() {
      this.getDictList()
    },
    methods: {
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleSizeChange(val) {
        // alert(`每页 ${val} 条`);
        this.size = val
        this.getDictList()
      },
      handleCurrentChange(val) {
        this.current = val
        this.getDictList()
      },
      rowClick(row) {
        this.currentRow = row
      },
      // 搜索
      staffStatusInput() {
        this.getDictList()
      },
      // 获取字典列表
      async getDictList() {
        // 解构出参数
        const { current, size } = this;
        const { dictVar } = this.dictData;
        var data = {
          current: current,
          size: size,
        }
        if (dictVar != '') {
          data.dictVar = dictVar
        }
        let result = await this.$API.dict.reqDictList(data)
        this.total = result.data.total;
        this.dictList = result.data.data
      },
      // 删除字典
      deleteRow(index, row) {
        // console.log(row)
        this.$confirm("永久删除这条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // 移除对应索引位置的数据，可以对row进行设置向后台请求删除数据
            var data = {
              dictId: this.currentRow.dictId
            }
            this.$API.dict.deleteDict(data).then(res => {
              if (res.data.code == 200) {
                this.dictList.splice(index, 1);
                this.reload();
                this.getDictList()
                this.$message.success("删除成功！");
              } else {
                this.$message.error("删除失败！");
              }
            })
          })
      },
      //  添加
      addDict() {
        // 解构出参数 
        var data = this.dictData;
        this.$API.dict.reqAddDict(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功！");
            this.dialogFormVisible = false;
            this.reload();
            this.getDictList();
          } else {
            this.$message.error("添加失败！");
          }
        })
      },
      updateButton(row) {
        console.log(row)
        this.updateRow = row;
        this.dialogFormVisible1 = true;
      },
      //修改
      updateDict() {
        var data = this.updateRow
        this.$API.dict.updateDict(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("修改成功！");
            this.dialogFormVisible1 = false;
            this.getDictList()
          } else {
            this.$message.error("修改失败！");
          }
        })
      },
    }
  }

</script>
<style scoped>
  @import "../../../../style/style.css";

  .main {
    border: 0px solid #000;
    border-radius: 10px;
    overflow: hidden;
  }
  .tabs>>>.el-table .el-table_1_column_16 {
    text-align: center;
  }

  .search .left {
    padding-left: 20px;
  }

  .search .left>>>.el-select .el-input {
    background-color: #f5f5f7;
    width: 200px;
    margin-left: 20px;
    border-radius: 50px;
    overflow: hidden;
    height: 40px;
  }

  .search .left>>>.el-input__icon {
    color: #000;
    font-weight: 600;
  }

  .search .left>>>.el-select .el-input .el-select__caret {
    color: #000;
  }

  .search .right {
    padding-right: 40px;
  }

  .search>>>.el-input__inner {
    background-color: #f5f5f7;
  }

  .add>>>.el-dialog {
    position: relative;
    margin: 0 auto 50px;
    border-radius: 15px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    box-sizing: border-box;
    width: 500px;
    overflow: hidden;
  }

  .add>>>.el-input__suffix {
    text-align: right;
  }

  .add>>>.el-select .el-input {
    width: 100%;
  }

  .add>>>.el-form-item__content {
    text-align: right;
    padding-right: 50px;
  }

  .add>>>.el-radio-group {
    margin-right: 100px;
    /* margin-top: 30px; */
  }
</style>